<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="height: 33px"
      />
      <el-input
        v-model="listQuery.accountNo"
        clearable
        size="small"
        class="filter-item"
        style="width: 200px"
        placeholder="请输入提现账号"
      />
      <el-select
        v-model="listQuery.statusArray"
        multiple
        size="small"
        style="width: 200px"
        class="filter-item"
        placeholder="请选择提现状态"
      >
        <el-option
          v-for="(key, value) in statusMap"
          :key="key"
          :label="key"
          :value="value"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
        >查找</el-button
      >
    </div>
    <el-table
      v-loading="listLoading"
      :data="batchList"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        min-width="80px"
        label="操作流水号"
        prop="traceSn"
      />

      <el-table-column
        align="center"
        min-width="200"
        label="品牌商家Id"
        prop="brandId"
      />

      <el-table-column
        align="center"
        min-width="80px"
        label="提现金额"
        prop="amount"
        sortable
      />

      <el-table-column
        align="center"
        min-width="120px"
        label="申请时间"
        prop="addTime"
      />

      <el-table-column
        align="center"
        min-width="80px"
        label="提现账户"
        prop="accountNo"
      />

      <el-table-column
        align="center"
        min-width="80px"
        label="操作类型"
        prop="type"
      >
        <template slot-scope="scope">
          {{ scope.row.type | typeFilter }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="审批状态" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status | statusFilter }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="审批备注" prop="traceMsg" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getlist"
    />
  </div>
</template>
<script>
import { getListWithdraw } from "@/api/business/stat";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
const statusMap = {
  0: "申请失败",
  1: "审批通过",
  2: "待审批",
};

const typeMap = {
  0: "系统结算",
  1: "商户申请",
};
const payType = {
  // 1: "微信",
  // 2: "银行",
  3: "线下",
};
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      return statusMap[status];
    },
    payFilter(type) {
      return payType[type];
    },
    typeFilter(type) {
      return typeMap[type];
    },
  },
  data() {
    return {
      batchList: [],
      listLoading: true,
      formLabelWidth: "120px",
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        time: [],
        accountNo: undefined,
        statusArray: [],
        sort: "add_time",
        order: "desc",
      },
      statusMap,
      typeMap,
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1;
      this.getlist();
    },
    getlist() {
      this.listLoading = true;
      getListWithdraw(this.listQuery)
        .then((response) => {
          this.listLoading = false;
          this.total = response.data.data.total;
          const list = response.data.data.items;
          this.batchList = list;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
  },
};
</script>
